<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<head>
    <title>index</title>
    <script src="/js/jquery-3.1.1.min.js" type="text/javascript"></script>
    <%--    <script src="/js/index.js" type="text/javascript"></script>--%>
    <link rel="stylesheet" href="/css/index.css">

    <style type="text/css" media="all">
        .hrLine {
            FILTER: alpha(opacity=100, finishopacity=0, style=3);
            display: inline-block;
        }
    </style>
</head>

<script type="text/javascript">
    $(function () {
        $("#submit").click(function () {

            var params = [];
            var data1 = $("#data1 input").serializeArray();
            if (checkEmpty(data1)) {
                params.push(getDataInfo(data1));
            }
            var data2 = $("#data2 input").serializeArray();
            if (checkEmpty(data2)) {
                params.push(getDataInfo(data2));
            }

            var url = "/calculateH";
            $.ajax({
                type: "POST",
                async: false,
                url: url,
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                "data": JSON.stringify(params),
                success: function (result) {
                    $("#calculateResult").show();
                    $("#valueHDesc").text("计算的H值为:" + result);
                    $("#valueH").val(result);
                },
                "error": function (result) {
                    alert(result.code + result.msg);
                }
            })

        });

        function checkEmpty(data) {
            for (var i = 0; i < data.length; i++) {
                var obj = data[i].value;
                if (typeof obj === 'undefined' || obj == null || obj === '') {
                    return false;
                }
            }
            return true;
        }

        function getDataInfo(data) {
            var info = new Object();
            for (var i = 0; i < data.length; i++) {
                info[data[i].name] = data[i].value;
            }
            info["lenY"] = $("#lenY").val();
            return info;
        }

        // 上传txt文件
        $("#uploadVolume").click(function () {
            var fileObj = document.getElementById('volumeFile').files[0];
            if (typeof (fileObj) == "undefined" || fileObj.size <= 0 || fileObj.name.search(/^.*\.(?:txt)$/) === -1) {
                return alert('请选择txt文件');
            }

            var url = "/uploadVolume";
            var params = new FormData();
            params.append("file", fileObj);
            $.ajax({
                type: "POST",
                async: false,
                url: url,
                dataType: "json",
                contentType: false,
                "data": params,
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false,
                success: function () {
                    alert("上传成功");
                },
                "error": function (result) {
                    console.log(result);
                    alert(result.code + result.msg);
                }
            })
        });


        //校验H值
        $("#submitFile").click(function () {
            $("#myLoading")[0].style.display = "block"

            $("#checkResult").hide();
            var fileObj = document.getElementById('fileUpload').files[0];
            if (typeof (fileObj) == "undefined" || fileObj.size <= 0 || fileObj.name.search(/^.*\.(?:xls|xlsx)$/) === -1) {
                $("#myLoading")[0].style.display = "none"
                return alert('请选择上传Excel数据');
            }

            var url = "/calculateHFile";
            var params = new FormData();
            params.append("file", fileObj);

            $.ajax({
                type: "POST",
                async: true,
                url: url,
                dataType: "json",
                contentType: false,
                "data": params,
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false,
                // "data": JSON.stringify(params),
                success: function (result) {
                    $("#myLoading")[0].style.display = "none"

                    console.log(result);
                    if (result.code == 'succ') {
                        $("#checkResult").show();
                        $("#checkH").text("校验的H值为:" + result.valueH);
                        $("#lossRate").text("损益率(‰)为:" + result.lossRate);
                        $("#checkData").text(result.checkData);

                        var objs = result.vtList;
                        var tab = document.getElementById("vtList"); // 获得表格
                        tab.innerHTML = ''
                        if (objs.length > 0) {
                            for (var i = 0; i <= objs.length; i++) { // 循环对象
                                var rows = tab.rows; // 表格ROW对象
                                if (i == 0) {
                                    var row0 = tab.insertRow(rows.length);
                                    row0.insertCell(0).innerHTML = "任务号"; // insertCell插入列，从0开始
                                    row0.insertCell(1).innerHTML = "损益率(‰)";
                                    row0.insertCell(2).innerHTML = "油库V20";
                                    row0.insertCell(3).innerHTML = "油站V20";
                                    continue;
                                }
                                var val = objs[i - 1];
                                var row1 = tab.insertRow(rows.length); // 插入一行rows是一个数组，代表没一行，索引从0开始
                                row1.insertCell(0).innerHTML = val.taskSeriesNum; // insertCell插入列，从0开始
                                row1.insertCell(1).innerHTML = val.lossRate;
                                row1.insertCell(2).innerHTML = val.storageV20;
                                row1.insertCell(3).innerHTML = val.stationV20;
                            }
                        }

                    } else {
                        alert(result.msg);
                    }
                },
                "error": function (result) {
                    $("#myLoading")[0].style.display = "none"

                    console.log(result);
                    alert(result.code + result.msg);

                }
            })
        });
    });

</script>

<body>

<div id="all">

    <div>
        <hr class="hrLine" width="10%" color=#987cb9 SIZE=2/>
        计算结果：
        <hr class="hrLine" width="60%" color=#987cb9 SIZE=2"/>
        <div id="calculateResult" hidden>
            <h3 id="valueHDesc"> ${valueH}</h3>
            <h3 id="valueH" hidden> ${valueH}</h3>
        </div>
        <div id="checkResult" hidden>
            <h3 id="checkData"> ${checkData}</h3>
            <h3 id="checkH"> ${checkH}</h3>
            <h3 id="lossRate"> ${lossRate}</h3>
            <table id="vtList" width="35%" border="1" cellspacing="0" cellpadding="0" class="table0"
                   style="text-align: left;"></table>
        </div>
        <hr class="hrLine" width="80%" color=#987cb9 SIZE=2"/>
    </div>

    <form action="#">
        <table border="1" cellspacing="0">
            <tr>
                <th>H1</th> <!--h液位仪-->
                <th>A1</th><!--angleY -->
                <th>A2</th> <!--angleX -->
            </tr>
            <tr id="data1">
                <td><input class="ipt" type="text" name="hLiquid" placeholder="请输入H1"/></td>
                <td><input class="ipt" type="text" name="angleY" placeholder="请输入轴向倾角值"/></td>
                <td><input class="ipt" type="text" name="angleX" placeholder="请输入横向倾角值"/></td>
            </tr>
            <tr id="data2">
                <td><input class="ipt" type="text" name="hLiquid" placeholder="请输入H1"/></td>
                <td><input class="ipt" type="text" name="angleY" placeholder="请输入轴向倾角值"/></td>
                <td><input class="ipt" type="text" name="angleX" placeholder="请输入横向倾角值"/></td>
            </tr>
        </table>
        <p><input class="sub" type="button" value="计&nbsp;&nbsp;算" id="submit"/></p>

    </form>


    <div>
        <hr class="hrLine" width="5%" color=#987cb9 SIZE=1/>
        校验数据
        <hr class="hrLine" width="80%" color=#987cb9 SIZE=1"/>
    </div>

    <div>
        <p>上传txt文件：<input class="sub" type="file" id="volumeFile" accept=".txt"/>
            <input class="sub" type="button" value="上传txt文件" id="uploadVolume"/></p>
    </div>
    <div>
        <a href="<%=request.getContextPath()%>/download">下载模板1</a><br/>
        <a href="<%=request.getContextPath()%>/downloadOilInfo">下载模板2</a><br/>
        <p>请选择Excel数据：<input class="sub" type="file" id="fileUpload" accept=".xlsx,.xls"/></p>
        <p><input class="sub" type="button" value="开始校验" id="submitFile"/></p>
    </div>
    <div class="el-loading-mask fullscreen" style="display: none" id="myLoading">
        <div class="el-loading-spinner">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none"/>
            </svg>
            <p class="el-loading-text">加载中...</p>
        </div>
    </div>
</div>

</body>
<style>

    .el-loading-mask {
        position: absolute;
        z-index: 2000;
        background-color: rgba(255, 255, 255, .9);
        margin: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transition: opacity .3s;
        transition: opacity .3s
    }

    .el-loading-mask.is-fullscreen .el-loading-spinner {
        margin-top: -25px
    }

    .el-loading-mask.is-fullscreen .el-loading-spinner .circular {
        height: 50px;
        width: 50px
    }

    .el-loading-spinner {
        top: 50%;
        margin-top: -21px;
        width: 100%;
        text-align: center;
        position: absolute
    }

    .el-loading-spinner .el-loading-text {
        color: #409EFF;
        margin: 3px 0;
        font-size: 14px
    }

    .el-loading-spinner .circular {
        height: 42px;
        width: 42px;
        -webkit-animation: loading-rotate 2s linear infinite;
        animation: loading-rotate 2s linear infinite
    }

    .el-loading-spinner .path {
        -webkit-animation: loading-dash 1.5s ease-in-out infinite;
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: #409EFF;
        stroke-linecap: round
    }

    .el-loading-spinner i {
        color: #409EFF
    }

    .el-loading-fade-enter,
    .el-loading-fade-leave-active {
        opacity: 0
    }

    @-webkit-keyframes loading-rotate {
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @keyframes loading-rotate {
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @-webkit-keyframes loading-dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0
        }

        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -40px
        }

        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -120px
        }
    }

    @keyframes loading-dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0
        }

        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -40px
        }

        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -120px
        }
    }
</style>

</html>
